<template>
	<view class="loginContainer justify-center align-center" :class="$thatThemeClassName">

		<!-- 微信小程序登录 -->
		<!-- <view class="fill-width" v-if="$config.isVxProgram">
			<view class="top_back"></view>
			<button class="wxq-btn loginWx" open-type="getUserInfo" @getuserinfo="getUserInfo">微信一键登录</button>
			<button class="wxq-btn goback" @click="goBack">返回</button>
		</view> -->

		 <view class="fill-width" v-if="$config.isVxProgram">
			<!-- 登录头部，包含图标和标题 -->
			<view class="wx-login-header flex flex-col items-center justify-center py-10">
				<!-- 微信图标，使用 SVG 图标 -->
				<svg class="w-20 h-20 text-yellow-400 mb-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
					<circle cx="50" cy="50" r="40" fill="#ffe57c" />
					<path d="M30 60 l10 -20 l10 20 l20 -20 l-20 -20 l-10 20 l-10 -20" fill="#fff" />
				</svg>
				<text class="wx-login-title text-4xl font-bold text-yellow-500">微信快捷登录</text>
			</view>
			<!-- 登录描述，简要说明登录的好处 -->
			<view class="wx-login-desc text-center text-gray-700 text-lg px-10 mb-10">
				使用微信账号一键登录，快速开启精彩之旅！
			</view>
			<!-- 微信一键登录按钮 -->
			<button class="wxq-btn loginWx bg-yellow-400 hover:bg-yellow-500 text-white font-bold py-4 px-10 rounded-full w-3/4 mx-auto mb-6 transition duration-300" open-type="getUserInfo" @getuserinfo="getUserInfo">
				微信一键登录
			</button>
			<!-- 返回按钮 -->
			<button class="wxq-btn goback bg-gray-200 hover:bg-gray-300 text-gray-600 font-bold py-4 px-10 rounded-full w-3/4 mx-auto transition duration-300" @click="goBack">
				返回
			</button>
			<!-- 登录提示，告知用户同意相关协议 -->
			<view class="wx-login-tips text-center text-gray-500 text-base mt-6">
				 <label>
					<checkbox @click=" agreed = !agreed" />
				 </label>				
				  我已阅读并同意
				  <text class="link text-yellow-400 hover:underline" @click="showUserAgreement">用户协议</text>
				  和
				  <text class="link text-yellow-400 hover:underline" @click="showPrivacyPolicy">隐私政策</text>
			</view>
		</view>


		<!-- 微信浏览器嵌套h5登录 -->
		<!-- <view class="fill-width" v-if="$config.isWxBrowser">
			微信h5
		</view> -->

		<!-- h5用用户名密码，手机号登录 !$config.isWxBrowser &&  -->
		<view class="" style="padding: 50rpx;width: 72%;" v-if="$config.isH5">
			<view class="fill-width formContanter">
				<view class="item">
					<uv-input v-model="phoneEmailObj.phoneNumberOrEmail" type="text" name="name" maxlength="20" placeholder="请输入您的手机号/邮箱" autocomplete="off" class="name">
						<template v-slot:prefix>
							<img src="/static/login/image/icon-phone.png" class="icon_img"/>
						</template>
					</uv-input>
				</view>
				<uv-input v-model="phoneEmailObj.code" placeholder="请输入验证码" class="item">
					<template v-slot:prefix>
						<img src="/static/login/image/icon-verify.png" class="icon_img"/>
					</template>
					<template v-slot:suffix>
						<uv-code
							ref="uCode"
							seconds="60"
							changeText="60秒重新获取"
						></uv-code>
						<uv-button
							:text="'发送验证码'"
							type="primary"
							size="mini"
							@click="sendVerificationCode"
						></uv-button>
					</template>
				</uv-input>
				<view class="forgetPwdText">忘记密码</view>
				<view class="submit">
					<uv-button type="primary" text="登&nbsp;陆" @click="phoneEmailLogin"></uv-button>
				</view>
			</view>
			<view class="other-login">
				<p><span>使用第三方帐号登陆</span></p>
				<view class="third">
					<view><img src="/static/login/picture/icon-qq.png"/></view>
					<view><img src="/static/login/picture/icon-weixin.png"/></view>
					<view><img src="/static/login/picture/icon-weibo.png"/></view>
				</view>
			</view>
			<view class="footer">
				<p>登录使用就表示同意用户协议<a href="javascript:;">条款</a>和<a href="javascript:;">隐私</a>政策</p>
			</view>
		</view>

	</view>
</template>

<script>
	// 微信小程序登录逻辑
	import wxMiniProgramLogin from './wxMiniProgramLogin'
	import { sendVerificationCode ,phoneNumberOrEmailLogin } from '@/api/common/login'
	import { toast } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { loginSuccess } from '@/hooks/login'
	export default {
		mixins: [wxMiniProgramLogin],
		data(){
			return {
				phoneEmailObj: {},
				agreed: false,
			}
		},
		methods: {
			showToast(message){
				uni.showToast({
					title: message,
					duration: 3000,
					icon: 'none'
				});
			},
			async sendVerificationCode(){
				if(this.phoneEmailObj?.phoneEmail?.length == 0){
					return this.showToast('请填写手机号/邮箱')
				}
				if (!this.$refs.uCode.canGetCode) {
					return toast('倒计时结束后再发送');
				}
				const res = await sendVerificationCode({phoneNumberOrEmail: this.phoneEmailObj.phoneNumberOrEmail })
				if(res.code == 200){
					toast('验证码已发送');
				}
				// 通知验证码组件内部开始倒计时
				this.$refs.uCode.start();
			},
			async phoneEmailLogin(){
				const res = await phoneNumberOrEmailLogin(this.phoneEmailObj)
				if(res.code == 200){
					loginSuccess(res.token)
					this.showToast('已登录！')
				}
			},
			 showUserAgreement() {
			  uni.navigateTo({ url: '/pages/my/child/uerAgreement' });
			},
			showPrivacyPolicy() {
			  uni.navigateTo({ url: '/pages/my/child/privacyPolicy' });
			}
		},
		onLoad(){

		}
	}
</script>

<style scoped>
	.loginContainer {
		width: 100%;
		height: 100%;
		background-color: #f3f5f7;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
		background-size: 100%;
		background-color: #f7f7f7;
	}
	.goback {
		width: 60%;
		background: #eee;
		color: #333;
		margin-bottom: 24rpx;
	}
	.loginWx {
		width: 60%;
		background: #50b7f1;
		margin-bottom: 24rpx;
		color: white;
	}
	.icon_img{width: 0.71rem;}
	/*登陆表单*/
	.formContanter{ display: flex;flex-direction:column;gap: 20px;}
	.formContanter .item{display: flex;align-items: center;font-size: .30rem;color: #333333;}
	.formContanter .item .uni-input-placeholder.input-placeholder{ padding: 0 12px !important;}
	.formContanter :deep(.uni-input-input){ padding: 0 12px !important;}
	.formContanter .item input{width: 100%;height: 100%;display: inline-block;border-radius: .85rem;padding:0 12px;box-shadow: 0px 0px 10px rgba(200,200,200,.1);padding-left: .8rem;outline: none;}
	.formContanter .item span{flex-shrink: 0;display: inline-block;width: 1.6rem;margin-left: .2rem;height: 100%;line-height: .85rem;border-radius: .85rem;background: #1f6ecf;font-size: .24rem;color: #fff;text-align: center;}
	.formContanter .item span.disabled{background: #808080;}
	.formContanter .forgetPwdText{text-align: center;color: #333333;font-size: .74rem;padding-top: .2rem;}
	.formContanter .submit{padding: .2rem .2rem;}
	.formContanter .submit button{height: .85rem;line-height: .85rem;text-align: center;font-size: .34rem;color: #FFFFFF;border-radius: .85rem;outline: none;box-shadow: 0 .15rem .15rem rgba(31,110,207,.2);display: inline-block;width: 100%;background: #1f6ecf;}
	.other-login p{text-align: center;position: relative;display: flex;align-items: center;justify-content: center;width: 6.7rem;margin: 15px auto;}
	.other-login p:after{content: "";height: .01rem;width: 100%;background: #808080;top: 50%;transform: translateY(-50%);position: absolute;}
	.other-login p span{display: inline-block;padding: .1rem .3rem;background: #FFFFFF;color: #808080;font-size: .62rem;z-index: 2;}
	.other-login .third {display: flex;align-items: center;justify-content: center;gap: 20px;}
	.other-login .third img{width: 1.66rem;height: 1.66rem;margin: 0 .25rem;}
	.footer{text-align: center;padding-top: .3rem;}
	.footer img{display: inline-block;width: 1.07rem;height: .35rem;}
	.footer p{font-size: .70rem;color: #666666;text-align: center;padding: .1rem 0 .4rem 0;letter-spacing: .01rem;}
	.footer p a{color: #078dda;}








	/* 微信小程序登录样式 */
	 .wx-login-header {
	     display: flex;
	     flex-direction: column;
	     align-items: center;
	     justify-content: center;
	     padding-top: 2.5rem;
	     padding-bottom: 2.5rem;
	 }

	 /* 微信登录标题样式 */
	 .wx-login-title {
	     font-size: 2.25rem;
	     font-weight: bold;
	     color: #ffc700;
	 }

	 /* 微信登录描述样式 */
	 .wx-login-desc {
	     text-align: center;
	     color: #4b5563;
	     font-size: 1.125rem;
	     padding-left: 2.5rem;
	     padding-right: 2.5rem;
	     margin-bottom: 2.5rem;
	 }

	 /* 微信一键登录按钮样式 */
	 .wxq-btn.loginWx {
	     background-color: #ffd633;
	     color: white;
	     font-weight: bold;
	     padding-top: 1rem;
	     padding-bottom: 1rem;
	     padding-left: 2.5rem;
	     padding-right: 2.5rem;
	     border-radius: 9999px;
	     width: 75%;
	     margin-left: auto;
	     margin-right: auto;
	     margin-bottom: 1.5rem;
	     transition-property: background-color;
	     transition-duration: 300ms;
	 }

	 .wxq-btn.loginWx:hover {
	     background-color: #ffc700;
	 }

	 /* 返回按钮样式 */
	 .wxq-btn.goback {
	     background-color: #e5e7eb;
	     color: #4b5563;
	     font-weight: bold;
	     padding-top: 1rem;
	     padding-bottom: 1rem;
	     padding-left: 2.5rem;
	     padding-right: 2.5rem;
	     border-radius: 9999px;
	     width: 75%;
	     margin-left: auto;
	     margin-right: auto;
	     transition-property: background-color;
	     transition-duration: 300ms;
	 }

	 .wxq-btn.goback:hover {
	     background-color: #d1d5db;
	 }

	 /* 登录提示样式 */
	 .wx-login-tips {
	     text-align: center;
	     color: #9ca3af;
	     font-size: 1rem;
	     margin-top: 1.5rem;
	 }

	 /* 链接样式 */
	 .link {
	     color: #ffd633;
	 }

	 .link:hover {
	     text-decoration: underline;
	 }
</style>
